<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Polylive</title>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}

BODY { font-family: Arial; font-size: small;
background-color: #CCCCFF;}

A:hover {color: red; text-decoration: underline; }


</style>
<script 

src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAYxpy0HiKBWXiyhVrpVqkshTWg_xmhpETXrjHUj59zHLsinrq_xSAm

AGIHF6kJpo3mJn5WnKDztG7kw"type="text/javascript">
</script>
</head>
<body onload="set()" onunload="GUnload()">

<div id="outline" style="position: absolute; top:60px;left:20px;width:512px; height:440px; 

-moz-outline-radius:20px; -moz-box-sizing:padding-box; -moz-outline-style:solid ;-moz-outline-color:#9FB6CD; 

-moz-outline-width:10px;visibility:transparent;">
</div>

<div id="map" style="position: absolute; top:60px;left:20px;width:512px; height:440px; "></div>


<script type="text/javascript">
//<![CDATA[


_mSvgEnabled = true;
_mSvgForced  = true;


////map
var map = new GMap2(document.getElementById("map"));
var start = new GLatLng(37.443109, -122.146189);
map.setCenter(start, 16);
map.addControl(new GMapTypeControl(1));
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());


// red marker icon
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
//icon.infoWindowAnchor = new GPoint(5, 1);


/////////////////////// 
var marker=[];
var point=[];
var poly=[];
var line=[];

point.push(new GLatLng(37.441218, -122.146404));
point.push(new GLatLng(37.441882, -122.147391));
point.push(new GLatLng(37.442478, -122.146811));
point.push(new GLatLng(37.441524, -122.145309));
point.push(new GLatLng(37.441831, -122.144237));
point.push(new GLatLng(37.443109, -122.146189));
point.push(new GLatLng(37.443722, -122.145674));
point.push(new GLatLng(37.444472, -122.146876));
point.push(new GLatLng(37.445000, -122.146404));
point.push(new GLatLng(37.445272, -122.146425));
point.push(new GLatLng(37.445886, -122.147477));
point.push(new GLatLng(37.444676, -122.148678));
point.push(new GLatLng(37.443893, -122.147369));


for(var n=0;n<point.length;n++)
{
	marker[n] = new GMarker(point[n], {icon:icon, draggable: true});
	map.addOverlay(marker[n]);
	marker[n].enableDragging();
	GEvent.addListener(marker[n],'drag',function(){
		draw()
	});
};

function draw()
{
	poly.length=0; 
	for(var i=0;i<marker.length;i++)
	{
		if(line[i]){
			map.removeOverlay(line[i])
		};
		poly.push(marker[i].getPoint());
		line[i]=new GPolyline(poly,'#FF0000', 3, 1);
		map.addOverlay(line[i]);
}};


draw();//fit();

//]]>
</script>


</body>
</html>
